<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box1{
				width: 100px;
				height: 100px;
				position: absolute;
				background-color: aqua;
			}
			
		</style>
		<script type="text/javascript">
			window.onload=function()
			{
				
				var kk=0;
				var speed=10;
				var box1=document.getElementById("box1");
				setInterval(function(){
					switch(kk)
					{
						case 37:
						box1.style.left=box1.offsetLeft-speed+"px";
						break;
						case 38:
						box1.style.top=box1.offsetTop-speed+"px";
						break;
						case 39:
						box1.style.left=box1.offsetLeft+speed+"px";
						break;
						case 40:
						box1.style.top=box1.offsetTop+speed+"px";
					}
				},30);
				document.onkeydown=function(event)
				{
					event=event||window.event;
					kk=event.keyCode;
					
					if(event.ctrlKey)
					{
						speed=30;
					}
					else
					{
						speed=10;
					}
				}
				document.onkeyup=function()
				{
					kk=0;
				}
				
			}
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>